$(function () {
  // 需求:div跟随鼠标移入的方向滑入，跟随鼠标移出的方向滑出

  // 遍历li,分别做鼠标移入和移出事件
  document.querySelectorAll(".affair li").forEach(function (li) {
    //1. 定义变量width和height分别对应li的宽高
    const width = li.offsetWidth;
    const height = li.offsetHeight;
    // console.log(width, heith);
    // 2.对li进行鼠标移入事件
    li.onmouseenter = function (e) {
      e = e || window.event;
      // 2.1分别定义left, top, right, bottom为鼠标移入时与li的左，上，右，下边的距离
        let left = e.pageX - this.offsetLeft;
        let top = e.pageY - this.offsetTop;
        let right = this.offsetLeft + width - e.pageX;
        let bottom = this.offsetTop + height - e.pageY;
        console.log(left, top, right, bottom);
        // 2.2 取出鼠标移入时与li的左，上，右，下边的距离中的最小值
        let min = Math.min(left, top, right, bottom);
        console.log(min);
        // console.log(this);
        // 2.3判定最小值，对应的变量就是鼠标移入的方向
        switch (min) {
          // 2.3.1最小值为left的时候，说明鼠标从左边移入
          case left:
            // return "left";
            // 2.3.2找到li对应的div，将其left值设为负的li的宽度，再让div将left值运动300毫秒到0
            $(this)
              .find(".affair-next")
              .css({ left: -width + "px", top: 0 })
              .stop(!0)
              .animate({ left: 0, top: 0 }, 300);
            break;
          case top:
            $(this)
              .find(".affair-next")
              .css({ left: 0, top: -height + "px" })
              .stop(!0)
              .animate({ left: 0, top: 0 }, 300);
            break;
          case right:
            $(this)
              .find(".affair-next")
              .css({ left: width + "px", top: 0 })
              .stop(!0)
              .animate({ left: 0, top: 0 }, 300);
            break;
          case bottom:
            $(this)
              .find(".affair-next")
              .css({ left: 0, top: height + "px" })
              .stop(!0)
              .animate({ left: 0, top: 0 }, 300);
            break;
        }
      };
      li.onmouseleave = function (e) {
        e = e || window.event;
        let left = e.pageX - this.offsetLeft;
        let top = e.pageY - this.offsetTop;
        let right = this.offsetLeft + width - e.pageX;
        let bottom = this.offsetTop + height - e.pageY;
        // console.log(left, top, right, bottom);
        let min = Math.min(left, top, right, bottom);
        console.log(min);
        console.log(this);
        switch (min) {
          case left:
            $(this)
              .find(".affair-next")
              .css({ left: 0, top: 0 })
              .stop(!0)
              .animate({ left: -width + "px", top: 0 }, 300);

            break;
          case top:
            $(this)
              .find(".affair-next")
              .css({ left: 0, top: 0 })
              .stop(!0)
              .animate({ left: 0, top: -height + "px" }, 300);
            break;
          case right:
            $(this)
              .find(".affair-next")
              .css({ left: 0, top: 0 })
              .stop(!0)
              .animate({ left: width + "px", top: 0 }, 300);
            break;
          case bottom:
            $(this)
              .find(".affair-next")
              .css({ left: 0, top: 0 })
              .stop(!0)
              .animate({ left: 0, top: height + "px" }, 300);
            break;
        }
      };
    });
  });
